<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人中心首页</title>
    <link rel="stylesheet" type="text/css" href="assets/components/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="assets/components/swiper.min.css"/>
    <link rel="stylesheet" type="text/css" href="assets/components/icon-font/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="assets/css/public.css"/>
    <link rel="stylesheet" type="text/css" href="assets/css/home.css"/>
    <link rel="stylesheet" type="text/css" href="assets/css/media.css"/>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="assets/js/html5shiv.min.js"></script>
    <![endif]-->
</head>
<body>
<!--头部导航-->
<div id="shortcut">
    <div class="container">
        <ul class="fl">
            <li class="dropdown" id="city_chose">
                <div class="dt shortcut_a">
                    送至：
                    <span>北京</span>
                    <i class="iconfont icon-xia"></i>
                </div>
                <div class="dd layer">
                    <div class="dd_spacer"></div>
                    <div class="dd_inner">
                        <div class="item">
                            <a href="###">北京</a>
                        </div>
                        <div class="item">
                            <a class="selected" href="###">上海</a>
                        </div>
                        <div class="item">
                            <a href="###">天津</a>
                        </div>
                        <div class="item">
                            <a href="###">重庆</a>
                        </div>
                        <div class="item">
                            <a href="###">河北</a>
                        </div>
                        <div class="item">
                            <a href="###">四川</a>
                        </div>
                        <div class="item">
                            <a href="###">陕西</a>
                        </div>
                        <div class="item">
                            <a href="###">山西</a>
                        </div>
                        <div class="item">
                            <a href="###">浙江</a>
                        </div>
                        <div class="item">
                            <a href="###">江苏</a>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
        <ul class="fr">
            <li>
                <a href="###" class="link_login">你好，请登录</a>
                <a href="###" class="link_regist">免费注册</a>
            </li>
            <li class="spacer"></li>
            <li>
                <div class="shortcut_a">
                    <a href="###" target="_blank">我的订单</a>
                </div>
            </li>
            <li class="spacer"></li>
            <li class="dropdown" id="person">
                <div class="dt shortcut_a">
                    <a href="###" target="_blank">个人中心</a>
                    <i class="iconfont icon-xia"></i>
                </div>
                <div class="dd layer">
                    <div class="dd_spacer"></div>
                    <div class="dd_inner">
                        <div class="item">
                            <a href="###">
                                我的个人中心
                            </a>
                        </div>
                        <div class="item">
                            <a href="###">
                                待支付订单
                            </a>
                        </div>
                        <div class="item">
                            <a href="###">
                                待收货订单
                            </a>
                        </div>
                        <div class="item">
                            <a href="###">
                                返修退换货
                            </a>
                        </div>
                    </div>
                </div>
            </li>
            <li class="spacer"></li>
            <li>
                <div class="shortcut_a">
                    <a href="###" target="_blank">会员中心</a>
                </div>
            </li>
            <li class="spacer"></li>
            <li>
                <div class="shortcut_a">
                    <a href="###" target="_blank">企业采购</a>
                </div>
            </li>
            <li class="spacer"></li>
            <li class="dropdown" id="phone">
                <div class="dt shortcut_a">
                    <i class="iconfont icon-shouji"></i>
                    <a href="###" target="_blank">手机下载</a>
                    <i class="iconfont icon-xia"></i>
                </div>
                <div class="dd layer">
                    <div class="dd_spacer"></div>
                    <div class="dd_inner">
                        <img src="" class="img-thumbnail"/>
                    </div>

                </div>
            </li>
            <li class="spacer"></li>
            <li class="dropdown" id="foucs">
                <div class="dt shortcut_a">
                    <a href="###" target="_blank">关注我们</a>
                    <i class="iconfont icon-xia"></i>
                </div>
                <div class="dd layer">
                    <div class="dd_spacer"></div>
                    <div class="dd_inner">
                        <img src="" class="img-thumbnail"/>
                    </div>
                </div>
            </li>
            <li class="spacer"></li>
            <li class="dropdown" id="custom_service">
                <div class="dt shortcut_a">
                    <a href="###" target="_blank">客户服务</a>
                    <i class="iconfont icon-xia"></i>
                </div>
                <div class="dd layer">
                    <div class="dd_spacer"></div>
                    <p>客户</p>
                    <ul>
                        <li>
                            <a href="###">售后服务</a>
                        </li>
                        <li>
                            <a href="###">售后服务</a>
                        </li>
                        <li>
                            <a href="###">售后服务</a>
                        </li>
                        <li>
                            <a href="###">售后服务</a>
                        </li>
                        <li>
                            <a href="###">售后服务</a>
                        </li>
                        <li>
                            <a href="###">售后服务</a>
                        </li>
                        <li>
                            <a href="###">售后服务</a>
                        </li>
                    </ul>
                    <p>商户</p>
                    <ul>
                        <li>
                            <a href="###">商学院</a>
                        </li>
                        <li>
                            <a href="###">入驻</a>
                        </li>
                    </ul>
                </div>
            </li>
            <li class="spacer"></li>
            <li class="dropdown" id="web_nav">
                <div class="dt shortcut_a">
                    <a href="###" target="_blank">网站导航</a>
                    <i class="iconfont icon-xia"></i>
                </div>
                <div class="dd layer">
                    <div class="dd_spacer"></div>
                    <div class="dd_inner">
                        <dl>
                            <dt>主题主题</dt>
                            <dd>
                                <ul>
                                    <li class="item">
                                        <a href="###">内容</a>
                                    </li>
                                    <li class="item">
                                        <a href="###">内容</a>
                                    </li>
                                    <li class="item">
                                        <a href="###">内容</a>
                                    </li>
                                    <li class="item">
                                        <a href="###">内容</a>
                                    </li>
                                    <li class="item">
                                        <a href="###">内容</a>
                                    </li>
                                    <li class="item">
                                        <a href="###">内容</a>
                                    </li>
                                    <li class="item">
                                        <a href="###">内容</a>
                                    </li>
                                    <li class="item">
                                        <a href="###">内容</a>
                                    </li>
                                    <li class="item">
                                        <a href="###">内容</a>
                                    </li>
                                    <li class="item">
                                        <a href="###">内容</a>
                                    </li>
                                    <li class="item">
                                        <a href="###">内容</a>
                                    </li>
                                    <li class="item">
                                        <a href="###">内容</a>
                                    </li>
                                    <li class="item">
                                        <a href="###">内容</a>
                                    </li>
                                </ul>
                            </dd>
                        </dl>
                        <dl>
                            <dt>主题主题</dt>
                            <dd>
                                <ul>
                                    <li class="item">
                                        <a href="###">内容</a>
                                    </li>
                                    <li class="item">
                                        <a href="###">内容</a>
                                    </li>
                                    <li class="item">
                                        <a href="###">内容</a>
                                    </li>
                                    <li class="item">
                                        <a href="###">内容</a>
                                    </li>
                                    <li class="item">
                                        <a href="###">内容</a>
                                    </li>
                                    <li class="item">
                                        <a href="###">内容</a>
                                    </li>
                                    <li class="item">
                                        <a href="###">内容</a>
                                    </li>
                                    <li class="item">
                                        <a href="###">内容</a>
                                    </li>
                                    <li class="item">
                                        <a href="###">内容</a>
                                    </li>
                                    <li class="item">
                                        <a href="###">内容</a>
                                    </li>
                                    <li class="item">
                                        <a href="###">内容</a>
                                    </li>
                                    <li class="item">
                                        <a href="###">内容</a>
                                    </li>
                                    <li class="item">
                                        <a href="###">内容</a>
                                    </li>
                                </ul>
                            </dd>
                        </dl>
                        <dl>
                            <dt>主题主题</dt>
                            <dd>
                                <ul>
                                    <li class="item">
                                        <a href="###">内容</a>
                                    </li>
                                    <li class="item">
                                        <a href="###">内容</a>
                                    </li>
                                    <li class="item">
                                        <a href="###">内容</a>
                                    </li>
                                    <li class="item">
                                        <a href="###">内容</a>
                                    </li>
                                    <li class="item">
                                        <a href="###">内容</a>
                                    </li>
                                    <li class="item">
                                        <a href="###">内容</a>
                                    </li>
                                    <li class="item">
                                        <a href="###">内容</a>
                                    </li>
                                    <li class="item">
                                        <a href="###">内容</a>
                                    </li>
                                    <li class="item">
                                        <a href="###">内容</a>
                                    </li>
                                    <li class="item">
                                        <a href="###">内容</a>
                                    </li>
                                    <li class="item">
                                        <a href="###">内容</a>
                                    </li>
                                    <li class="item">
                                        <a href="###">内容</a>
                                    </li>
                                    <li class="item">
                                        <a href="###">内容</a>
                                    </li>
                                </ul>
                            </dd>
                        </dl>
                        <dl>
                            <dt>主题主题</dt>
                            <dd>
                                <ul>
                                    <li class="item">
                                        <a href="###">内容</a>
                                    </li>
                                    <li class="item">
                                        <a href="###">内容</a>
                                    </li>
                                    <li class="item">
                                        <a href="###">内容</a>
                                    </li>
                                    <li class="item">
                                        <a href="###">内容</a>
                                    </li>
                                    <li class="item">
                                        <a href="###">内容</a>
                                    </li>
                                    <li class="item">
                                        <a href="###">内容</a>
                                    </li>
                                    <li class="item">
                                        <a href="###">内容</a>
                                    </li>
                                    <li class="item">
                                        <a href="###">内容</a>
                                    </li>
                                    <li class="item">
                                        <a href="###">内容</a>
                                    </li>
                                    <li class="item">
                                        <a href="###">内容</a>
                                    </li>
                                    <li class="item">
                                        <a href="###">内容</a>
                                    </li>
                                    <li class="item">
                                        <a href="###">内容</a>
                                    </li>
                                    <li class="item">
                                        <a href="###">内容</a>
                                    </li>
                                </ul>
                            </dd>
                        </dl>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>
<header id="header">
    <div class="container">
        <div class="home-logo">
            <a href="##" class="fore1"></a>
            <a href="##" class="fore2">我的京东</a>
            <a href="##" class="fore3">返回京东首页</a>
        </div>
        <div class="navitems">
            <ul class="clearfix">
                <li><a href="##">首页</a></li>
                <li>
                    <div class="dl">
                        <div class="dt">
                            <span>账户设置</span>
                            <i class="iconfont icon-xia"></i>
                        </div>
                        <div class="dd">
                            <a href="##">个人信息</a>
                            <a href="##">个人信息</a>
                            <a href="##">个人信息</a>
                            <a href="##">个人信息</a>
                            <a href="##">个人信息</a>
                            <a href="##">个人信息</a>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="dl">
                        <div class="dt">
                            <span>社区</span>
                            <i class="iconfont icon-xia"></i>
                        </div>
                        <div class="dd">
                            <a href="##">个人信息</a>
                            <a href="##">个人信息</a>
                            <a href="##">个人信息</a>
                            <a href="##">个人信息</a>
                            <a href="##">个人信息</a>
                            <a href="##">个人信息</a>
                        </div>
                    </div>
                </li>
                <li><a href="##">消息</a></li>

            </ul>
        </div>
        <div class="head_r">
            <div class="shop_bag fore">
                <div>
                    <i class="iconfont icon-gouwuche1"></i>
                    <a class="fore_a" href="###">我的购物车</a>
                    <i class="iconfont icon-angle-right"></i>
                    <i class="count" id="shopping_amount">00</i>
                </div>
                <div class="layer">
                    <div class="empty hide">
                        <div class="spacer">

                        </div>
                        <i class="iconfont icon-gouwuchekong"></i>
                        <span>
									  购物车空空如也
								</span>
                    </div>
                    <div class="shoplist">
                        <div class="spacer"></div>
                        <div class="smt">
                            <h4 class="fl">最新加入的商品</h4>
                        </div>
                        <div class="smc">
                            <ul>
                                <li>
                                    <div class="p_img fl">
                                        <a href="###">
                                            <img src="" class="img-thumbnail"/>
                                        </a>
                                    </div>
                                    <div class="p_name fl">
                                        <a href="###">太太静心助眠口服液礼盒装15ml*60支 年货送礼</a>
                                    </div>
                                    <div class="p_detail fr">
												<span class="p_price">
													<strong>$288.00</strong>
													X1
												</span>
                                        <br/>
                                        <a href="###" class="delete">删除</a>
                                    </div>
                                </li>
                                <li>
                                    <div class="p_img fl">
                                        <a href="###">
                                            <img src="" class="img-thumbnail"/>
                                        </a>
                                    </div>
                                    <div class="p_name fl">
                                        <a href="###">太太静心助眠口服液礼盒装15ml*60支 年货送礼</a>
                                    </div>
                                    <div class="p_detail fr">
												<span class="p_price">
													<strong>$288.00</strong>
													X1
												</span>
                                        <br/>
                                        <a href="###" class="delete">删除</a>
                                    </div>
                                </li>
                                <li>
                                    <div class="p_img fl">
                                        <a href="###">
                                            <img src="" class="img-thumbnail"/>
                                        </a>
                                    </div>
                                    <div class="p_name fl">
                                        <a href="###">太太静心助眠口服液礼盒装15ml*60支 年货送礼</a>
                                    </div>
                                    <div class="p_detail fr">
												<span class="p_price">
													<strong>$288.00</strong>
													X1
												</span>
                                        <br/>
                                        <a href="###" class="delete">删除</a>
                                    </div>
                                </li>
                                <li>
                                    <div class="p_img fl">
                                        <a href="###">
                                            <img src="" class="img-thumbnail"/>
                                        </a>
                                    </div>
                                    <div class="p_name fl">
                                        <a href="###">太太静心助眠口服液礼盒装15ml*60支 年货送礼</a>
                                    </div>
                                    <div class="p_detail fr">
												<span class="p_price">
													<strong>$288.00</strong>
													X1
												</span>
                                        <br/>
                                        <a href="###" class="delete">删除</a>
                                    </div>
                                </li>
                                <li>
                                    <div class="p_img fl">
                                        <a href="###">
                                            <img src="" class="img-thumbnail"/>
                                        </a>
                                    </div>
                                    <div class="p_name fl">
                                        <a href="###">太太静心助眠口服液礼盒装15ml*60支 年货送礼</a>
                                    </div>
                                    <div class="p_detail fr">
												<span class="p_price">
													<strong>$288.00</strong>
													X1
												</span>
                                        <br/>
                                        <a href="###" class="delete">删除</a>
                                    </div>
                                </li>
                                <li>
                                    <div class="p_img fl">
                                        <a href="###">
                                            <img src="" class="img-thumbnail"/>
                                        </a>
                                    </div>
                                    <div class="p_name fl">
                                        <a href="###">太太静心助眠口服液礼盒装15ml*60支 年货送礼</a>
                                    </div>
                                    <div class="p_detail fr">
												<span class="p_price">
													<strong>$288.00</strong>
													X1
												</span>
                                        <br/>
                                        <a href="###" class="delete">删除</a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="smb">
                            <div class="p_total fl">
                                共
                                <b>14</b> 件商品 &nbsp; &nbsp; 共计
                                <strong>$1111.11</strong>
                            </div>
                            <a href="###">去购物车</a>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="search_box">
            <div class="form">
                <input type="text" class="search_text"/>
                <button class="btn_search">搜索</button>
            </div>
        </div>
    </div>
</header>

<div class="container">
    <div class="content clearfix">
        <div class="sub">
            <dl>
                <dt>订单中心</dt>
                <dd><a href="order.html">我的订单</a></dd>
                <dd><a href="##">我的订单</a></dd>
                <dd><a href="##">我的订单</a></dd>
                <dd><a href="##">我的订单</a></dd>
            </dl>
            <dl>
                <dt>设置</dt>
                <dd><a href="##">个人信息</a></dd>
                <dd><a href="##">收货地址</a></dd>
            </dl>
        </div>
        <div class="main">
            <div class="main-1 clearfix">
                <div class="fc-msg">
                    <a href="##">支付有礼</a>
                    <b>|</b>
                    <a href="##">智能客服</a>
                </div>
                <div class="user-info">
                    <div class="info-lcol">
                        <div class="user-img">
                            <a href="##">
                                <img src="./assets/img/01mid.jpg" alt="用户头像" class="img-circle">
                            </a>
                        </div>
                        <div class="user-m">
                            <p class="u-name">
                                <a href="##">
                                    某土豪
                                </a>
                            </p>
                            <p class="u-level">
                                <i></i>
                                <a href="##">注册会员</a>
                            </p>
                            <p class="u-safe">
                                <a href="##">账户安全:</a>
                                <i class="rank-5"></i>
                                <strong class="rank-high">较高</strong>
                            </p>
                            <p class="u-medal">
                                <a href="##">我的勋章</a>
                            </p>
                            <div class="info-line">
                                <span class="top-icon"></span>
                                <span class="bottom-icon"></span>
                            </div>
                        </div>
                    </div>

                    <div class="info-rcol">
                        <div class="user-counts">
                            <ul class="clearfix">
                                <li>
                                    <i></i>
                                    <a href="##">待付款</a>
                                    <em>0</em>
                                </li>
                                <li>
                                    <i></i>
                                    <a href="##">待付款</a>
                                    <em>0</em>
                                </li>
                                <li>
                                    <i></i>
                                    <a href="##">待付款</a>
                                    <em>0</em>
                                </li>
                                <li>
                                    <i></i>
                                    <a href="##">待付款</a>
                                    <em>0</em>
                                </li>
                            </ul>
                        </div>
                        <div class="acco-info">
                            <ul class="clearfix">
                                <li>
                                    <p>
                                        <span>余额：</span>
                                        <em>0.00</em>
                                    </p>
                                    <p>
                                        <span>余额：</span>
                                        <em>0.00</em>
                                    </p>
                                    <p>
                                        <span>余额：</span>
                                        <em>0.00</em>
                                    </p>
                                    <p>
                                        <span>余额：</span>
                                        <em>0.00</em>
                                    </p>
                                    <p>
                                        <span>余额：</span>
                                        <em>0.00</em>
                                    </p>
                                </li>
                                <li>
                                    <p>
                                        <span>余额：</span>
                                        <em>0.00</em>
                                    </p>
                                    <p>
                                        <span>余额：</span>
                                        <em>0.00</em>
                                    </p>
                                    <p>
                                        <span>余额：</span>
                                        <em>0.00</em>
                                    </p>
                                    <p>
                                        <span>余额：</span>
                                        <em>0.00</em>
                                    </p>
                                    <p>
                                        <span>余额：</span>
                                        <em>0.00</em>
                                    </p>
                                </li>
                                <li>
                                    <p>
                                        <span>余额：</span>
                                        <em>0.00</em>
                                    </p>
                                    <p>
                                        <span>余额：</span>
                                        <em>0.00</em>
                                    </p>
                                    <p>
                                        <span>余额：</span>
                                        <em>0.00</em>
                                    </p>
                                    <p>
                                        <span>余额：</span>
                                        <em>0.00</em>
                                    </p>
                                    <p>
                                        <span>余额：</span>
                                        <em>0.00</em>
                                    </p>
                                </li>
                            </ul>

                        </div>


                    </div>
                </div>
                <div class="mod-box ">
                    <div class="mod-main order-box">
                        <div class="mt clearfix">
                            <h3>我的订单</h3>
                            <a href="##">查看全部订单</a>
                        </div>
                        <div class="mc">
                            <div class="nocont-box">
                                <i class="icon-order"></i>
                                您买的东西太少了，这里都空空的，快去挑选合适的商品吧！
                            </div>
                        </div>
                    </div>
                    <div class="mod-main focus-box">
                        <div class="mt clearfix">
                            <h3>我关注的商品</h3>
                            <div class="extra-l">
                                <span>
                                    <a href="##">降价商品
                                    <em>0</em>
                                    </a>
                                </span>
                                <span>
                                    <a href="##">降价商品
                                    <em>0</em>
                                    </a>
                                </span>
                            </div>
                            <a href="##">查看更多</a>
                        </div>
                        <div class="mc">
                            <div class="nocont-box nofocus">
                                您还没有关注任何商品，看到感兴趣的就果断关注吧！
                            </div>
                            <div class="follow">
                                <a href="##" class="prev ctrl hide">
                                    <i></i>
                                </a>
                                <a href="##" class="next ctrl">
                                    <i></i>
                                </a>
                                <div class="slider-show">
                                    <div class="slider-show-ctn">
                                        <ul>
                                            <li>
                                                <div class="p-img">
                                                    <a href="##">
                                                        <img src="" alt="商品图" class="img-rounded">
                                                    </a>
                                                </div>
                                                <div class="p-price">
                                                    ￥558.00
                                                    <span class="icon-down">直降</span>
                                                </div>
                                                <div class="p-cut">降价￥224.00</div>
                                            </li>
                                            <li>
                                                <div class="p-img">
                                                    <a href="##">
                                                        <img src="" alt="商品图" class="img-rounded">
                                                    </a>
                                                </div>
                                                <div class="p-price">
                                                    ￥558.00
                                                    <span class="icon-down">直降</span>
                                                </div>
                                                <div class="p-cut">降价￥224.00</div>
                                            </li>
                                            <li>
                                                <div class="p-img">
                                                    <a href="##">
                                                        <img src="" alt="商品图" class="img-rounded">
                                                    </a>
                                                </div>
                                                <div class="p-price">
                                                    ￥558.00
                                                    <span class="icon-down">直降</span>
                                                </div>
                                                <div class="p-cut">降价￥224.00</div>
                                            </li>
                                            <li>
                                                <div class="p-img">
                                                    <a href="##">
                                                        <img src="" alt="商品图" class="img-rounded">
                                                    </a>
                                                </div>
                                                <div class="p-price">
                                                    ￥558.00
                                                    <span class="icon-down">直降</span>
                                                </div>
                                                <div class="p-cut">降价￥224.00</div>
                                            </li>
                                            <li>
                                                <div class="p-img">
                                                    <a href="##">
                                                        <img src="" alt="商品图" class="img-rounded">
                                                    </a>
                                                </div>
                                                <div class="p-price">
                                                    ￥558.00
                                                    <span class="icon-down">直降</span>
                                                </div>
                                                <div class="p-cut">降价￥224.00</div>
                                            </li>
                                            <li>
                                                <div class="p-img">
                                                    <a href="##">
                                                        <img src="" alt="商品图" class="img-rounded">
                                                    </a>
                                                </div>
                                                <div class="p-price">
                                                    ￥558.00
                                                    <span class="icon-down">直降</span>
                                                </div>
                                                <div class="p-cut">降价￥224.00</div>
                                            </li>
                                            <li>
                                                <div class="p-img">
                                                    <a href="##">
                                                        <img src="" alt="商品图" class="img-rounded">
                                                    </a>
                                                </div>
                                                <div class="p-price">
                                                    ￥558.00
                                                    <span class="icon-down">直降</span>
                                                </div>
                                                <div class="p-cut">降价￥224.00</div>
                                            </li>
                                            <li>
                                                <div class="p-img">
                                                    <a href="##">
                                                        <img src="" alt="商品图" class="img-rounded">
                                                    </a>
                                                </div>
                                                <div class="p-price">
                                                    ￥558.00
                                                    <span class="icon-down">直降</span>
                                                </div>
                                                <div class="p-cut">降价￥224.00</div>
                                            </li>
                                            <li>
                                                <div class="p-img">
                                                    <a href="##">
                                                        <img src="" alt="商品图" class="img-rounded">
                                                    </a>
                                                </div>
                                                <div class="p-price">
                                                    ￥558.00
                                                    <span class="icon-down">直降</span>
                                                </div>
                                                <div class="p-cut">降价￥224.00</div>
                                            </li>
                                            <li>
                                                <div class="p-img">
                                                    <a href="##">
                                                        <img src="" alt="商品图" class="img-rounded">
                                                    </a>
                                                </div>
                                                <div class="p-price">
                                                    ￥558.00
                                                    <span class="icon-down">直降</span>
                                                </div>
                                                <div class="p-cut">降价￥224.00</div>
                                            </li>
                                            <li>
                                                <div class="p-img">
                                                    <a href="##">
                                                        <img src="" alt="商品图" class="img-rounded">
                                                    </a>
                                                </div>
                                                <div class="p-price">
                                                    ￥558.00
                                                    <span class="icon-down">直降</span>
                                                </div>
                                                <div class="p-cut">降价￥224.00</div>
                                            </li>
                                            <li>
                                                <div class="p-img">
                                                    <a href="##">
                                                        <img src="" alt="商品图" class="img-rounded">
                                                    </a>
                                                </div>
                                                <div class="p-price">
                                                    ￥558.00
                                                    <span class="icon-down">直降</span>
                                                </div>
                                                <div class="p-cut">降价￥224.00</div>
                                            </li>
                                            <li>
                                                <div class="p-img">
                                                    <a href="##">
                                                        <img src="" alt="商品图" class="img-rounded">
                                                    </a>
                                                </div>
                                                <div class="p-price">
                                                    ￥558.00
                                                    <span class="icon-down">直降</span>
                                                </div>
                                                <div class="p-cut">降价￥224.00</div>
                                            </li>
                                            <li>
                                                <div class="p-img">
                                                    <a href="##">
                                                        <img src="" alt="商品图" class="img-rounded">
                                                    </a>
                                                </div>
                                                <div class="p-price">
                                                    ￥558.00
                                                    <span class="icon-down">直降</span>
                                                </div>
                                                <div class="p-cut">降价￥224.00</div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="ad-box">
                    <div class="mod-main">
                        <div class="mt clearfix">
                            <h3>广告位</h3>
                        </div>
                        <div class="mc">

                        </div>
                    </div>
                    <div class="mod-main">
                        <div class="mt clearfix">
                            <h3>广告位</h3>
                        </div>
                        <div class="mc">

                        </div>
                    </div>
                </div>
                <div class="ad-img">
                    <a href="##">
                        <img src="" alt="广告图" class="img-rounded">
                    </a>
                    <a href="##">
                        <img src="" alt="广告图" class="img-rounded">
                    </a>
                    <a href="##">
                        <img src="" alt="广告图" class="img-rounded">
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<!--footer-->
<footer>
    <div class="footer_service">
        <ul class="service_inner">
            <li class="service_item">
                <div class="service_unit">
                    <h5 class="service_tit service_tit_duo">多</h5>
                    <p class="service_text">品类齐全，轻松购物</p>
                </div>
            </li>
            <li class="service_item">
                <div class="service_unit">
                    <h5 class="service_tit service_tit_kuai">快</h5>
                    <p class="service_text">品类齐全，轻松购物</p>
                </div>
            </li>
            <li class="service_item">
                <div class="service_unit">
                    <h5 class="service_tit service_tit_hao">好</h5>
                    <p class="service_text">品类齐全，轻松购物</p>
                </div>
            </li>
            <li class="service_item">
                <div class="service_unit">
                    <h5 class="service_tit service_tit_sheng">省</h5>
                    <p class="service_text">品类齐全，轻松购物</p>
                </div>
            </li>
        </ul>
    </div>
    <div class="footer_help container">
        <dl>
            <dt>购物指南</dt>
            <dd>
                <div>
                    <a href="###">购物流程</a>
                </div>
            </dd>
            <dd>
                <div>
                    <a href="###">购物流程</a>
                </div>
            </dd>
            <dd>
                <div>
                    <a href="###">购物流程</a>
                </div>
            </dd>
            <dd>
                <div>
                    <a href="###">购物流程</a>
                </div>
            </dd>
            <dd>
                <div>
                    <a href="###">购物流程</a>
                </div>
            </dd>
            <dd>
                <div>
                    <a href="###">购物流程</a>
                </div>
            </dd>
        </dl>
        <dl>
            <dt>购物指南</dt>
            <dd>
                <div>
                    <a href="###">购物流程</a>
                </div>
            </dd>
            <dd>
                <div>
                    <a href="###">购物流程</a>
                </div>
            </dd>
            <dd>
                <div>
                    <a href="###">购物流程</a>
                </div>
            </dd>
            <dd>
                <div>
                    <a href="###">购物流程</a>
                </div>
            </dd>
            <dd>
                <div>
                    <a href="###">购物流程</a>
                </div>
            </dd>
            <dd>
                <div>
                    <a href="###">购物流程</a>
                </div>
            </dd>
        </dl>
        <dl>
            <dt>购物指南</dt>
            <dd>
                <div>
                    <a href="###">购物流程</a>
                </div>
            </dd>
            <dd>
                <div>
                    <a href="###">购物流程</a>
                </div>
            </dd>
            <dd>
                <div>
                    <a href="###">购物流程</a>
                </div>
            </dd>
            <dd>
                <div>
                    <a href="###">购物流程</a>
                </div>
            </dd>
            <dd>
                <div>
                    <a href="###">购物流程</a>
                </div>
            </dd>
            <dd>
                <div>
                    <a href="###">购物流程</a>
                </div>
            </dd>
        </dl>
        <dl>
            <dt>购物指南</dt>
            <dd>
                <div>
                    <a href="###">购物流程</a>
                </div>
            </dd>
            <dd>
                <div>
                    <a href="###">购物流程</a>
                </div>
            </dd>
            <dd>
                <div>
                    <a href="###">购物流程</a>
                </div>
            </dd>
            <dd>
                <div>
                    <a href="###">购物流程</a>
                </div>
            </dd>
            <dd>
                <div>
                    <a href="###">购物流程</a>
                </div>
            </dd>
            <dd>
                <div>
                    <a href="###">购物流程</a>
                </div>
            </dd>
        </dl>
        <dl>
            <dt>购物指南</dt>
            <dd>
                <div>
                    <a href="###">购物流程</a>
                </div>
            </dd>
            <dd>
                <div>
                    <a href="###">购物流程</a>
                </div>
            </dd>
            <dd>
                <div>
                    <a href="###">购物流程</a>
                </div>
            </dd>
            <dd>
                <div>
                    <a href="###">购物流程</a>
                </div>
            </dd>
            <dd>
                <div>
                    <a href="###">购物流程</a>
                </div>
            </dd>
            <dd>
                <div>
                    <a href="###">购物流程</a>
                </div>
            </dd>
        </dl>
    </div>
    <div class="container">
        <div class="footer">
            <div class="links">
                <a href="###">关于我们</a>
                |
                <a href="###">关于我们</a>
                |
                <a href="###">关于我们</a>
                |
                <a href="###">关于我们</a>
                |
                <a href="###">关于我们</a>
                |
                <a href="###">关于我们</a>
                |
                <a href="###">关于我们</a>
                |
                <a href="###">关于我们</a>
                |
                <a href="###">关于我们</a>
                |
                <a href="###">关于我们</a>
                |
                <a href="###">关于我们</a>
            </div>
            <div class="copyright">
                北京市公安局朝阳分局备案编号110105014669&nbsp;&nbsp;|&nbsp;&nbsp;京ICP证070359号 |
                <a href="###">互联网药品信息服务资格证编号(京)-经营性-2014-0008</a>
                &nbsp;&nbsp;|&nbsp;&nbsp; 新出发京零 字第大120007号
                <br/>
                <a href="###">音像制品经营许可证苏宿批005号</a>
                &nbsp;&nbsp; |&nbsp;&nbsp; 出版物经营许可证编号新出发(苏)批字第N-012号 &nbsp;&nbsp; | &nbsp;&nbsp; 互联网出版许可证编号新出网证(京)字150号
                <br/>
                <a href="###">网络文化经营许可证京网文[2014]2148-348号</a>
                &nbsp;&nbsp;违法和不良信息举报电话：4006561155 &nbsp;&nbsp; Copyright&nbsp; © &nbsp;2004-2016 &nbsp;&nbsp; 京东JD.com&nbsp;
                版权所有
                <br/>
            </div>
            <div class="authentication">
                <a href="###">
                    <img src="assets/img/54b8871eNa9a7067e.png"/>
                </a>
                <a href="###">
                    <img src="assets/img/54b8871eNa9a7067e.png"/>
                </a>
                <a href="###">
                    <img src="assets/img/54b8871eNa9a7067e.png"/>
                </a>
                <a href="###">
                    <img src="assets/img/54b8871eNa9a7067e.png"/>
                </a>
                <a href="###">
                    <img src="assets/img/54b8871eNa9a7067e.png"/>
                </a>
                <a href="###">
                    <img src="assets/img/54b8871eNa9a7067e.png"/>
                </a>
            </div>
        </div>
    </div>
</footer>
<script type="text/javascript" src="assets/components/jquery-1.9.1.min.js"></script>
<script src="assets/components/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript" src="assets/js/public.js"></script>
<script>
    $(function () {

        var liw = parseInt($(".slider-show-ctn li").width()) + 10;
        /*获取每个li的宽度加上10像素外边距*/
        var lig = $(".slider-show-ctn li").length;
        /*获取li的个数*/
        var ulw = liw * lig;
        $(".slider-show-ctn ul").css("width", ulw);
        /*获取li总宽度并设置成ul的宽度*/
        var boxW = $(".slider-show-ctn").css("left");
        /*获取滑动盒子的left值*/
        var m = Math.floor(ulw / 700);
        /*算出可点击的次数m*/
        var i = 0;
        /*要移动的left值*/
        var n = 0;
        /*点击的次数n*/
        $(".prev").click(function () {
            n--;
            i = i + 700;
            $(".next").removeClass("hide");
            $(".slider-show-ctn").css("left", i);
            console.log(i);
            if (n == 0) {
                $(".prev").addClass("hide");
            }
        });

        $(".next").click(function () {
            n++;
            i = i + -700;
            $(".prev").removeClass("hide");
            if (n < m) {
                $(".slider-show-ctn").css("left", i);
            } else if (n == m) {
                $(".slider-show-ctn").css("left", i);
                $(".next").addClass("hide");
            }
        })
    })
</script>
</body>
</html>